import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import {Modal,Divider,Table ,Icon,Spin,Button,Input,Select,DatePicker, Form,   Row,message,
  Col, Upload} from 'antd';
const Option = Select.Option;
const { TextArea } = Input;
const FormItem = Form.Item;
import styles from './index.less'
function getBase64(file, callback) {
  const reader = new FileReader();
  message.success(file.response.message)
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(file.originFileObj);
}
@Form.create()
class FunctionEdit extends PureComponent {
  constructor(props) {
    super(props);
    this.state ={
      loading: false,
      loanLoading: false,
      mallLoading: false,
      messageLoading: false,
      cartLoading: false,
      mineLoading: false,
      loanImg: '',
      mallImg: '',
      msgImg: '',
      cartImg: '',
      mineImg: '',
      sendParam:{
        loanUrl: null,
        mallUrl: null,
        messageUrl: null,
        cartUrl: null,
        mineUrl: null,
        title: null,
        id:null,
      }
    }
  }
  componentDidMount() {
    const {editCon,isEdit} = this.props;
    if(isEdit){
      this.setState({
        loanImg: editCon.loanUrl,
        mallImg: editCon.mallUrl,
        msgImg: editCon.messageUrl,
        cartImg: editCon.cartUrl,
        mineImg: editCon.mineUrl,
        sendParam:{
          loanUrl: editCon.loanUrl,
          mallUrl: editCon.mallUrl,
          messageUrl:  editCon.messageUrl,
          cartUrl: editCon.cartUrl,
          mineUrl: editCon.mineUrl,
          title: editCon.title,
          id: editCon.id,
        }
      })
    }

  }
  componentWillReceiveProps(nextProps) {
    // clean state

  }
  handleSearch = e => {
    e.preventDefault();
    const {sendParam} = this.state;
    const { form,handleFunc,isEdit,handleModal,source} = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      sendParam.title = fieldsValue.title;
      sendParam.source = source;
      if (!isEdit){
        delete sendParam.id;
        for (let item in sendParam){ if (!sendParam[item]){message.error('图标未上传'); return;} }
      }
      handleFunc(sendParam,isEdit);
      handleModal(false)
    });
  };
  handleFormReset = () => {
    const { form, dispatch,handleModal } = this.props;
    handleModal(false);
    form.resetFields();
  };
  handleChange = (type,info) => {
    const {sendParam} = this.state
    if (info.file.status === 'uploading') {
      if(type=='loan'){ this.setState({ loanLoading: true }); }
      if(type=='mall'){ this.setState({ mallLoading: true }); }
      if(type=='message'){ this.setState({ messageLoading: true }); }
      if(type=='cart'){ this.setState({ cartLoading: true }); }
      if(type=='mine'){ this.setState({ mineLoading: true }); }
      return;
    }
    if (info.file.status === 'done') {
      if(type=='loan'){
        sendParam.loanUrl = info.file.response.data;
        getBase64(info.file, loanImg => this.setState({loanImg, loanLoading: false,}));
      }
      if(type=='mall'){
        sendParam.mallUrl = info.file.response.data;
        getBase64(info.file, mallImg => this.setState({mallImg, mallLoading: false,}));
      }
      if(type=='message'){
        sendParam.messageUrl = info.file.response.data;
        getBase64(info.file, msgImg => this.setState({msgImg, messageLoading: false,}));
      }
      if(type=='cart'){
        sendParam.cartUrl = info.file.response.data;
        getBase64(info.file, cartImg => this.setState({cartImg, cartLoading: false,}));
      }
      if(type=='mine'){
        sendParam.mineUrl = info.file.response.data;
        getBase64(info.file, mineImg => this.setState({mineImg, mineLoading: false,}));
      }
    }
  }

  render() {
    const {url,headers,form,isEdit,editCon} = this.props
    const { getFieldDecorator } = form;
    const { loanImg, mallImg ,msgImg,cartImg,mineImg} = this.state;
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">上传图标</div>
      </div>
    );
    return (
      <div className="clearfix">
        <Form onSubmit={this.handleSearch} >
          <FormItem label="组标题">
            {getFieldDecorator('title',{
              initialValue:isEdit ? editCon.title:null,
              rules: [{
                required: true, message: '请输入组标题',
              }],
            })( <Input  />)}
          </FormItem>
          <div className={styles.displayHoriBetwwen}>
            <div className={styles.displayColTop}>
              <FormItem label="" className={styles.noBottom}>
                {getFieldDecorator('loan')(
                  <Upload
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    headers = {headers}
                    action={url}
                    onChange={this.handleChange.bind(this,'loan')}
                  >
                    {loanImg ? <img src={loanImg} alt="avatar" className={styles.uploadImg}/> : uploadButton}
                  </Upload>
                )}
              </FormItem>
              <span>借款</span>
            </div>
            <div className={styles.displayColTop}>
              <FormItem label="" className={styles.noBottom}>
                {getFieldDecorator('mall')(
                  <Upload
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    headers = {headers}
                    action={url}
                    onChange={this.handleChange.bind(this,'mall')}
                  >
                    {mallImg ? <img src={mallImg} alt="avatar" className={styles.uploadImg}/> : uploadButton}
                  </Upload>

                )}
              </FormItem>
              <span>商城</span>
            </div>
            <div className={styles.displayColTop}>
              <FormItem label="" className={styles.noBottom}>
                {getFieldDecorator('message')(
                  <Upload
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    headers = {headers}
                    action={url}
                    onChange={this.handleChange.bind(this,'message')}
                  >
                    {msgImg ? <img src={msgImg} alt="avatar" className={styles.uploadImg}/> : uploadButton}
                  </Upload>

                )}
              </FormItem>
              <span>消息</span>
            </div>
            <div className={styles.displayColTop}>
              <FormItem label="" className={styles.noBottom}>
                {getFieldDecorator('cart')(
                  <Upload
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    headers = {headers}
                    action={url}
                    onChange={this.handleChange.bind(this,'cart')}
                  >
                    {cartImg ? <img src={cartImg} alt="avatar" className={styles.uploadImg}/> : uploadButton}
                  </Upload>

                )}
              </FormItem>
              <span>购物车</span>
            </div>

            <div className={styles.displayColTop}>
              <FormItem label="" className={styles.noBottom}>
                {getFieldDecorator('mine')(
                  <Upload
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    headers = {headers}
                    action={url}
                    onChange={this.handleChange.bind(this,'mine')}
                  >
                    {mineImg ? <img src={mineImg} alt="avatar" className={styles.uploadImg}/> : uploadButton}
                  </Upload>

                )}
              </FormItem>
              <span>我的</span>
            </div>


          </div>
          <div style={{marginTop:30}}>
            <Button type="primary" htmlType="submit" >
              确定
            </Button>
            <Button style={{marginLeft:18}}  onClick={this.handleFormReset}>
              取消
            </Button>
          </div>
        </Form>
      </div>
    );
  }
}

export default FunctionEdit;
